<!-- 数据大屏地图 -->
<template>
  <div class="majorDate">
    <div class="container">
      <div class="echarts" ref="charts"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
/* 引入 echarts */
import * as echarts from 'echarts'
/* 引入中国地图数据 */
import chinaJson from './china.json'
/* evharts DOM元素 */
const charts = ref<any>()
/* echarts需要渲染的数据 */
/* 注册中国地图 */
echarts.registerMap('china', chinaJson as any)
/* 初始化 echarts*/
onMounted(() => {
  /* 获取echarts实例对象 */
  const myEcharts = echarts.init(charts.value)
  /* 渲染数据 */
  myEcharts.setOption({
    /* 地理坐标系组件。 */
    geo: {
      map: 'china' /* 地图名称 */,
      roam: true /* 是否支持鼠标缩放 */,
      /* 图形上的文本标签，可用于说明图形的一些数据信息 */
      label: {
        show: true /* 显示标签 */,
        color: '#fff',
      },
      /* 地图区域的多边形 图形样式 */
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x1: 0,
          y1: 1,
          colorStops: [
            { offset: 0, color: '#6a11cb' },
            { offset: 1, color: '#2575fc' },
          ],
        } /* 地图区域颜色 */,
        opacity: '0.6' /* 透明度背景 */,
      },
      zoom: 1.5 /* 放大比例 */,
      center: [103, 34] /* 定位 */,
      /* 高亮状态 */
      emphasis: {
        focus: 'self' /* 高亮时淡出其他名称 */,
        itemStyle: {
          areaColor: 'red',
        },
        label: {
          fontSize: '20px',
          color: '#fff',
        },
      },
      /* 淡出下的样式 */
      blur: {
        label: {
          show: false /* 淡出情况下隐藏标题 */,
        },
      },
    },
    /* 类型样式 */
    series: [
      {
        type: 'lines' /* 航线 */,
        // polyline: true /* 是否多线段 */,
        /* 线的特效 */
        effect: {
          show: true /* 显示动画 */,
          roundTrip: true /* 原路返回 */,
          period: 4 /* 动画时间 */,
          symbol: 'arrow',
          symbolSize: 10,
          color: '#78d0ff',
          trailLength: 0,
        },
        /* 数据 */
        data: [
          {
            coords: [
              [115.892151, 28.676493] /* 起点 */,
              [116.405285, 39.904989] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 1,
            },
          },
          {
            coords: [
              [115.892151, 28.676493] /* 起点 */,
              [87.617733, 43.792818] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [115.892151, 28.676493] /* 起点 */,
              [102.712251, 25.040609] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [115.892151, 28.676493] /* 起点 */,
              [111.670801, 40.818311] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [115.892151, 28.676493] /* 起点 */,
              [126.642464, 45.756967] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [115.892151, 28.676493] /* 起点 */,
              [121.509062, 25.044332] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [121.472644, 31.231706] /* 起点 */,
              [121.509062, 25.044332] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [91.132212, 29.660361] /* 起点 */,
              [110.33119, 20.031971] /* 终点 */,
              /* 如果 polyline 为 true 还可以设置更多的点 */
            ],
            /* 统一的样式设置 */
            lineStyle: {
              width: 2,
              color: '#ab98cc',
              curveness: 0.6,
            },
          },
        ],
      },
    ],
  })
})
</script>

<style lang="scss" scoped>
.majorDate {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
    .echarts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
